<template>
  <q-chip :removable="removable" @remove="handleRemove(tag)"
          :color="color" :style="style"
          text-color="white" size="sm" @click="handleSearch(tag)">
    <q-avatar v-if="showLevel"
              style="font-size: 20px;" color="black" text-color="white">{{ tag.level }}
    </q-avatar>
    <span>{{ tag.name }}</span>
  </q-chip>
</template>

<script>
export default {
  name: 'ToolTagChip',
  props: {
    tag: {
      type: Object,
      default: function () {
        return {
          name: '',
          level: 3
        }
      }
    },
    removable: Boolean,
    showLevel: Boolean
  },
  computed: {
    color () {
      const levelColor = ['', 'primary', 'secondary', 'info'][this.tag.level]
      const customColor = this.tag.color
      return customColor || levelColor
    },
    style () {
      return this.tag.color ? { backgroundColor: this.tag.color } : {}
    }
  },
  methods: {
    handleRemove (tag) {
      this.$emit('remove', tag)
    },
    handleSearch (tag) {
      console.log(tag)
      this.$router.push({
        name: 'AppIndex',
        params: { index: tag }
      })
    }
  }
}
</script>

<style scoped>

</style>
